require(['./config'], () => {
    require(["template", 'header', 'footer', 'jquery', 'fdj', 'fly', 'bootstrap'], (template,header) => {
        class Index {
            constructor() {
                this.getDate().then(() => {
                    this.init()
                    this.addTocart()
                   
                })
            }
            init() {
                console.dir($(".right-img")) // elevateZoom这个方法是扩展再$的原型上的
                $('.zoom-image').elevateZoom({
                    gallery: 'gall',
                    zoomType: "inner", // 放所有小图容器盒子ul的id，不加#
                })
            }
            getDate() {
                const id = location.search.slice(4)
                return new Promise(resolve => {
                    $.get(`http://www.xiongmaoyouxuan.com/api/detail?id=${id}&normal=1&sa=`,
                        resp => {
                            if (resp.code == 200) {
                                const {
                                    photo,
                                    title,
                                    price,
                                    id
                                } = resp.data.detail

                                this.detail = {
                                    id,
                                    title,
                                    price,
                                    photo
                                }
                                $('.shop-content').html(template("shop-content-template", {
                                    ...this.detail
                                }))
                                resolve()
                            }
                        })
                })

            }
            addTocart(e) {
                $('.add-cart').on('click', (e) => {
                  if(localStorage.getItem("userList")){
                    this.fly(e)
                    let cart = localStorage.getItem('cart')
                    if (cart) {
                        cart = JSON.parse(cart)
                        const isExist = cart.some(shop => shop.id === this.detail.id)
                        if (isExist) {
                            cart = cart.map(shop => {
                                if (shop.id === this.detail.id) {
                                    shop.count++
                                }
                                return shop
                            })
                        } else {
                            cart.push({
                                ...this.detail,
                                count: 1,
                                check:true
                            })
                        }
                        localStorage.setItem('cart', JSON.stringify(cart))
                    } else {
                        localStorage.setItem('cart', JSON.stringify([{
                            ...this.detail,
                            count: 1,
                            check:true
                        }]))
                    }
                  }else{
                    alert('你还没有登录，请登录')
                    location.href = '/html/reg.html'
                  }
                })
            }
                fly (e) {
                    $(`<img class="img-fly" src="${this.detail.photo[0].url}">`).fly({
                      start:{
                        left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
                        top: e.clientY,//开始位置（必填）
                      },
                      end:{
                        left: $('.fly').offset().left - $(window).scrollLeft(), //结束位置（必填）
                        top: $('.fly').offset().top - $(window).scrollTop()  //结束位置（必填）
                        // width: 100, //结束时高度
                        // height: 100, //结束时高度
                      },
                      // autoPlay: false, //是否直接运动,默认true
                      speed: 0.7, //越大越快，默认1.2
                      // vertex_Rtop: 100, //运动轨迹最高点top值，默认20
                      onEnd: function(){
                          console.log('end');
                        this.destroy()
                        header.zongCart()
                        // 重新计算购物车总数量
                        // 接收header对象调用header的方法实现计算
                        // header.calcCartCount()
                      } //结束回调
                    })
                  }
        }
        new Index()
    })
})